<template>
  <div class="row">
    <div class="col-mx-8 col-md-6">
      <div class="panel panel-green">
        <div class="panel-heading">
          <span class="fa fa-bar-chart-o  left-title">Total Traffic by Hits</span>
          <i class="right-title">  LAST 60 MINUTES</i>
        </div>
        <div class="panel-body panel-height25">
          <div id="httpd-access-min" class="panel-height24">
            <i class="httpd-access-min-number">{{minCount}}</i>
            <i class="httpd-access-min-title"> Min.</i>
          </div>
        </div>
        <div class="panel-footer">
          <a href="/httpdlog/status_code_errors.html">
            <i class="fa fa-arrow-circle-right"></i> Errors </a>
          </a>
          <a href="/httpdlog/http_access_details.html">
            <span class="pull-right">Traffic Details <i class="fa fa-arrow-circle-right"></i></span>
          </a>
        </div>
      </div>
    </div>
    <div class="col-mx-4 col-md-6">
      <div class="panel panel-green">
        <div class="panel-heading">
          <span class="fa fa-bar-chart-o  left-title">Total Traffic by Hits</span>
          <i class="right-title">  LAST 30 DAYS</i>
        </div>
        <!-- /.panel-heading -->
        <div class="httpdAccessStats panel-body">
          <div class="col-xs-10">
            <div id="httpd-access-hour" class="panel-height12"></div>
          </div>
          <div class="col-xs-2">
            <i class="httpd-access-hour-number">{{hourCount}}</i>
            <i class="httpd-access-hour-title"> Hour</i>
          </div>
          <div class="col-xs-10">
            <div id="httpd-access-day" class="panel-height12"></div>
          </div>
          <div class="col-xs-2">
            <i class="httpd-access-day-number">{{dayCount}}</i>
            <i class="httpd-access-day-title"> Day</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { init, loadHttpDatas, } from './loadHttpDatas'

export default {
  data() {
    return {
      minCount: 0,
      hourCount: 0,
      dayCount: 0,
    }
  },

  mounted() {
    $(() => {
      this.$store.commit('LOC_PAGE', this.$route.name)
      init().then(r => {
        this.loadDatasMethod({
          interval_min: 60,
          interval_hour: 24,
          interval_day: 30,
        })
      })
    })
  },

  methods: {
    loadDatasMethod(params) {
      if (this.$store.state.page != 'DashBoard')
        return false
      loadHttpDatas(params).then(({
        minCount,
        hourCount,
        dayCount,
      }) => {
        this.minCount = minCount
        this.hourCount = hourCount
        this.dayCount = dayCount
        setTimeout(() => {
          this.loadDatasMethod()
        }, this.$store.state.interval)
      })
    }
  },
}

</script>
<style>


</style>
